<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
<h1>首页</h1>
<form th:action="@{/testRequestBody}" method="post">
    <input type="text" name="username"> <br>
    <input type="text" name="password"> <br>
    <input type="submit" value="测试@RequestBody">
</form>
<form th:action="@{/testRequestEntity}" method="post">
    <input type="text" name="username"> <br>
    <input type="text" name="password"> <br>
    <input type="submit" value="测试RequestEntity类型">
</form>
<a th:href="@{/testResponse}">测试通过ServletAPI的response对象来响应浏览器数据</a> <br>
<a th:href="@{/testResponseBody}">测试@ResponseBody响应浏览器数据</a> <br>
<a th:href="@{/testResponseUser}">测试@ResponseBody响应浏览器User</a> <br>
<div id="app">
    <a @click="testAxios" th:href="@{/testAxios}">测试SprigMVC处理ajax</a>
</div>

<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<script type="text/javascript" th:src="@{/static/js/axios.min.js}"></script>
<script type="text/javascript">
    const vm = new Vue({
        el: '#app',
        methods: {
            testAxios(event) {
                axios({
                    method: 'post',
                    url: event.target.href,
                    params: {
                        username: 'admin',
                        password: '123456'
                    }
                }).then(resp => {
                    alert(resp.data)
                })
                event.preventDefault() // 取消超链接的默认行为 跳转
            }
        }
    })
</script>
</body>
</html>